import React, { Component } from 'react'

export default class Login extends Component {
  state = {
    username: 'admin',
    password: '123'
  }

  login = () => {
    console.log('---login---', this.state)
  }

  changeUsername = e => {
    this.setState({
      username: e.target.value
    })
  }

  changePassword = e => {
    this.setState({
      password: e.target.value
    })
  }

  change = e => {
    this.setState({
      // 属性名表达式：https://es6.ruanyifeng.com/#docs/object#%E5%B1%9E%E6%80%A7%E5%90%8D%E8%A1%A8%E8%BE%BE%E5%BC%8F
      [e.target.name]: e.target.value
    })
  }

  render () {
    return (
      <div>
        Login
        <p>
          用户名：
          <input
            type='text'
            value={this.state.username}
            name='username'
            onChange={this.change}
          />
        </p>
        <p>
          密码：
          <input
            type='text'
            value={this.state.password}
            name='password'
            onChange={this.change}
          />
        </p>
        <p>
          <button onClick={this.login}>登录</button>
        </p>
      </div>
    )
  }
}
